<template>
  <view class="order_list_page">
    <navbar bg-color="#E72A2A" :title="title" color="#ffffff">
      <view class="left-icon" slot="leftIcon" style="position: absolute">
        <view class="logo"> LOGO </view>
      </view>
    </navbar>
    <view class="order_tabs">
      <view
        class="order_tabs_item"
        :class="tabIndex == item.id ? 'order_tabs_item_h' : ''"
        v-for="item in tabList"
        :key="item.id"
        @click="clickTabs(item)"
      >
        {{ item.name }}
        <view
          class="order_tabs_item_solid"
          :class="tabIndex == item.id ? 'opacity' : ''"
        ></view>
      </view>
    </view>
    <view class="order_tabs_height"></view>

    <view class="order_content">
      <view
        class="order_item"
        v-for="(item, i) in list"
        :key="item.id"
        @click="
          clickNav('/pagesOrder/pages/orderDetail/orderDetail?id=' + item.id)
        "
      >
        <view class="order_item_top">
          <view class="order_item_name">
            {{ item.orderDetail.name }}
          </view>
          <view class="order_item_status">
            {{
              item.is_service == 1
                ? "申请退款"
                : item.is_service == -1
                ? "拒绝退款"
                : item.is_service == 2
                ? "退款成功"
                : statusMap[item.status]
            }}
          </view>
        </view>
        <view class="order_item_time_box">
          <text class="order_item_time_title"> 服务时间： </text>
          <text class="order_item_time">
            {{ item.starttime }}
          </text>
        </view>
        <view class="order_item_time_box">
          <text class="order_item_time_title"> 服务地址： </text>
          <text class="order_item_time">
            {{ item.address.area + item.address.address }}
          </text>
        </view>
        <!-- 已取消 -->
        <view
          class="item_btn_box"
          v-if="item.status == '-1' && item.is_service == 0"
        >
          <view @click.stop="delOrder(item.id)" class="item_btn item_btn1"
            >删除</view
          >
          <view class="item_btn item_btn2">撤销申请</view>
        </view>
        <!-- 待付款 -->
        <view
          class="item_btn_box"
          v-if="item.status == '0' && item.is_service == 0"
        >
          <view class="item_btn item_btn1">取消预约</view>
          <view class="item_btn item_btn2">去支付</view>
        </view>
        <!-- 待接单 -->
        <view
          class="item_btn_box"
          v-if="item.status == '1' && item.is_service == 0"
        >
          <view class="item_btn item_btn2">申请退款</view>
        </view>
        <!-- 待出发 -->
        <view
          class="item_btn_box"
          v-if="item.status == '2' && item.is_service == 0"
        >
          <view class="item_btn item_btn1">申请退款</view>
          <view class="item_btn item_btn2" style="width: 214rpx"
            >联系服务人员</view
          >
        </view>
        <!-- 已到达 -->
        <view
          class="item_btn_box"
          v-if="item.status == '4' && item.is_service == 0"
        >
          <view class="item_btn item_btn1">申请退款</view>
          <view class="item_btn item_btn2" style="width: 214rpx"
            >确认开始服务</view
          >
        </view>
        <!-- 服务中 -->
        <view
          class="item_btn_box"
          v-if="item.status == '5' && item.is_service == 0"
        >
          <view class="item_btn item_btn2">确认完成</view>
        </view>
        <!-- 已完成 -->
        <view
          class="item_btn_box"
          v-if="item.status == '6' && item.is_service == 0"
        >
          <view
            @click.stop="toReserve(item.orderDetail.goods_id)"
            class="item_btn item_btn1"
            >再次预约</view
          >
          <view class="item_btn item_btn2">去评价</view>
        </view>
        <!-- 已评价 -->
        <view
          class="item_btn_box"
          v-if="item.status == '7' && item.is_service == 0"
        >
          <view @click.stop="delOrder(item.id)" class="item_btn item_btn1"
            >删除订单</view
          >
          <view
            @click.stop="toReserve(item.orderDetail.goods_id)"
            class="item_btn item_btn2"
            >再次预约</view
          >
        </view>
        <!-- 申请退款 -->
        <view class="item_btn_box" v-if="item.is_service == 1">
          <view class="item_btn item_btn1">修改申请</view>
          <view class="item_btn item_btn2">撤销申请</view>
        </view>
        <!-- 拒绝退款 -->
        <view class="item_btn_box" v-if="item.is_service == -1">
          <view class="item_btn item_btn1">撤销申请</view>
          <view class="item_btn item_btn2">修改申请</view>
        </view>
        <!-- 退款成功 -->
        <view class="item_btn_box" v-if="item.is_service == 2">
          <view @click.stop="delOrder(item.id)" class="item_btn item_btn1"
            >删除</view
          >
          <view
            @click.stop="toReserve(item.orderDetail.goods_id)"
            class="item_btn item_btn2"
            >再次预约</view
          >
        </view>
      </view>
    </view>

    <Tarbar index="3" page="1"></Tarbar>
  </view>
</template>

<script>
import { userorderlist } from "@/utils/api/serviceApi.js";
import { delOrder } from "@/utils/api/serviceApi.js";
import { NavTo } from "../../utils/uni_api.js";
export default {
  data() {
    return {
      tabIndex: "all",
      tabList: [
        {
          name: "全部",
          id: "all",
        },
        {
          name: "待付款",
          id: "0",
        },
        {
          name: "待接单",
          id: "1",
        },
        {
          name: "进行中",
          id: "not_in_finish",
        },
        {
          name: "已完成",
          id: "finish",
        },
      ],
      statusMap: {
        0: "待支付",
        1: "待接单",
        2: "进行中",
        3: "进行中",
        4: "进行中",
        5: "进行中",
        6: "交易完成",
        7: "交易完成",
        "-1": "已取消",
      },
      page: 1,
      is_all: 1,
      list: [],
      last_page: 0,
      total: 0,
      title:'服务订单'
    };
  },
  onLoad(option) {
    if (option.titleType && option.titleType == "2") {
      this.title = '委托订单'
    }
    this.getList();
  },
  methods: {
    getList() {
      let obj = {
        page: this.page,
      };
      if (this.tabIndex == "all") {
        obj.is_all = "1";
      } else if (this.tabIndex == "0" || this.tabIndex == "1") {
        obj.status = this.tabIndex;
      } else if (this.tabIndex == "not_in_finish") {
        obj.not_in_finish = "1";
      } else if (this.tabIndex == "finish") {
        obj.finish = "1";
      }
      uni.showLoading({
        title: "加载中...",
      });
      userorderlist(obj).then((res) => {
        uni.hideLoading();
        if (this.page == 1) {
          this.list = res.data;
        } else {
          this.list = [...this.list, ...res.data];
        }
      });
    },
    clickTabs(item) {
      console.log(item);
      this.tabIndex = item.id;
      this.page = 1;
      this.getList();
    },
    clickNav(url) {
      NavTo(url);
    },
    // 再次预约
    toReserve(id) {
      console.log(id);
      uni.navigateTo({
        // url:`/pagesCourse/reserve/reserve?id=${id}`
        url: "/pagesService/serviceDetail/serviceDetail?id=" + id,
      });
    },
    // 删除订单
    delOrder(id) {
      console.log(id);
      uni.showModal({
        title: "提示",
        content: "是否确认删除订单",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: "删除中...",
            });
            delOrder({
              id,
            }).then((res) => {
              uni.hideLoading();
              if (res.code == 1) {
                uni.showToast({
                  title: "删除成功",
                  icon: "none",
                });
                this.getList();
              }
              if (res.code == 0) {
                uni.showToast({
                  title: res.msg,
                  icon: "none",
                });
              }
            });
          }
        },
      });
    },
  },
  onReachBottom() {
    this.page++;
    this.getList();
  },
};
</script>

<style scoped lang="scss">
@import url("../../style/css/orderList.scss");
</style>